<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <input id="id" name="id" th:value="${user!= null? user.id: ''}" type="hidden">
  <div class="demo-reg-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" th:value="${user!= null? user.username:''}" th:if="${user!=null}" disabled class="layui-input layui-disabled">
        <input type="text" name="username" value="" th:unless="${user!=null}" placeholder="用户名"  class="layui-input" lay-verify="required|username">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-user"></i>
        </div>
        <input type="text" name="name" th:value="${user!= null?user.name:''}" placeholder="真实姓名" autocomplete="off" class="layui-input" lay-verify="required|name">
      </div>
    </div>

    <div class="layui-form-item" th:if="${user == null}">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="text" name="password" value="" placeholder="密码" autocomplete="off" class="layui-input" lay-verify="required|name">
      </div>
    </div>


    <div class="layui-form-item" >
      <div class="layui-input-wrap" th:if="${user!=null}">
        <input type="radio" name="gender" value="true" title="男" th:if="${user.gender}" checked >
        <input type="radio" name="gender" value="false" title="女" th:if="${user.gender}">
        <input type="radio" name="gender" value="true" title="男" th:if="${!user.gender}">
        <input type="radio" name="gender" value="false" title="女" th:if="${!user.gender}" checked>
      </div>
      <div class="layui-input-wrap" th:unless="${user!=null}">
        <input type="radio" name="gender" value="true" title="男"  checked >
        <input type="radio" name="gender" value="false" title="女">
      </div>
    </div>

    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo">提交</button>
    </div>

  </div>
</form>
<script th:src="@{/layui/layui.js}"></script>
<script>
  let ctx = '[[${#request.contextPath}]]';
</script>
<script>
  layui.use(['form','jquery', 'layer'], function(){
    var $ = layui.jquery;
    let form = layui.form;
    let layer = layui.layer;
    // 自定义验证规则，如下以验证用户名和密码为例
    form.verify({
      // 函数写法
      // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
      name: function(value, item){
        if(!new RegExp("^[\u4e00-\u9fa5]+$").test(value)){
          return '真实姓名只能是中文'; // 返回提示信息
        }
      },
      username: function(value, item){
        if(!new RegExp("^[a-zA-Z0-9_\\s·]+$").test(value)){
          return '用户名不能有特殊字符'; // 返回提示信息
        }
      }
    });

    // 提交事件
    form.on('submit(demo)', function(data){
      var field = data.field; // 获取表单字段值
      fetch(ctx + '/user/edit', {
          method: 'post',
          body: JSON.stringify(field),
          headers: {
            'Content-Type': 'application/json'
          }
      }).then(function(res){
        return res.text();
      }).then(function(data){
        console.log(data);
        if (data == 'success'){
          // 提示成功信息
            layer.msg('修改成功', function () {
                // 刷新父页面表格数据
                parent.layui.table.reload('test');
                // 关闭当前页面
                let index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            });


        } else {
          // 提示错误信息
            layer.msg(data);
        }
      })
      return false; // 阻止默认 form 跳转
    });
  })
</script>
</body>
</html>